<!-- API文档 -->
<template>
  <div class="border flexStartDetween">
    <!-- API接入信息() -->
    <div class="width40">
      <p class="title-title">{{data.title}}平台API对接配置信息</p>
      <div class="infoBox width100">
        <div class="contentItem flexBetween textCenter" v-for="(item, index) in data.infoList" :key="index"
          v-show="item.show" style="margin-top: -1px;">
          <div :class="item.key != 'documentApi' ? 'width30' : 'textCenter width100 title-title borderLR'">
            <el-tooltip effect="dark" placement="top" v-if="item.key != 'documentApi'">
              <template #content>{{ item.tips }}</template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </div>
          <div class="width65 colorGre" v-if="item.label == 'APP ID'">
            {{ item.value }}
          </div>
          <div class="width65 color44" v-else-if="item.label == '地区'">{{ selectToLabel(COUNTRY, item.value) }}</div>
          <div class="width65 color44 flex" v-else-if="item.label == '第三方接口域名'" style="height: 50px;">
            <div class="width80 text-cut">{{ item.value }}</div>
            <el-button class="marginL10 marginR5" v-if="data.addQuery.is_multi_currency" size="small" type="warning"
              @click="data.isShowDetails = true">{{ item.value ? '编 辑' : '请输入第三方接口域名' }}</el-button>
          </div>
          <div class="width65" v-else-if="item.label == 'API接入模式'"><el-tag style="font-size: 14px;" size="large">
              {{ selectToLabel(APITYPE, item.value) }}</el-tag></div>
          <div class="width65 color44 flex" v-else-if="item.label == '秘钥'" style="height: 50px;">
            <div class="width80 text-cut">{{ item.value }}</div>
            <el-button class="marginL10 marginR5" v-if="data.addQuery.is_multi_currency" size="small" type="warning"
              @click="data.isShowDetails = true">{{ item.value ? '编 辑' : '请输入秘钥' }}</el-button>
          </div>
          <div class="width65" v-else-if="item.label == '状态'"> <el-tag :type="item.value ? 'success' : 'danger'"
              style="font-size: 14px;" size="large">
              {{ selectToLabel(DEMOPLAY, item.value) }}</el-tag>
          </div>
          <div class="width65 color44" v-else-if="item.label == '创建时间'">{{ setTimestampTime(item.value as number) }}
          </div>
          <div class="width65 color44" v-else-if="item.key == 'document'">
            <el-button class="documentBtn" :text="true" size="small" type="success" @click="download('https://www.showdoc.com.cn/2531533114615809')">
              查看英文版
            </el-button>
            <el-button class="documentBtn" :text="true" size="small" type="primary" @click="download('https://www.showdoc.com.cn/2485927944770828/0')">
              查看中文版
            </el-button>
          </div>
          <div class="width65 color44" v-else-if="item.key == 'password'">{{ item.value }}</div>
          <div class="width55Currency flexWrap" v-else-if="item.label == '货币/货币ID'">
            <div class="width50 flex text-cut textCenter" v-for="(second, two) in item.value" :key="two"
              style="line-height: 30px;font-size: 16px;">
              <p class="selectWidth150 colorDark marginR5 colorRed">{{ second.label }}</p>ID：<span class="colorRed">{{
                second.value }}</span>
            </div>
          </div>
          <div :class="item.key != 'documentApi' ? 'width65 color44' : ''" class="" v-else>{{ item.value }}</div>
        </div>
      </div>
    </div>
    <!-- 域名信息 -->
    <div class="width58">
      <div class="flexBetween">
        <p class="title-title" style="width: 95%;">{{data.title}}平台API域名地址信息栏</p>
        <p class="title-title" style="width:21%;border-left: none;">备注</p>
      </div>
      <div class="infoBox width100 textCenter">
        <div class="flex">
          <div class="width15">公共</div>
          <div class="width85">
            <div class="flex borderBottom" >
              <div class="width82 colorYe borderRight" style="width: 82.5%;;line-height: 45px;font-size: 18px !important;">{{data.title}}平台接口域名地址：{{ data.api_url }}</div>
              <div class="width36" style="line-height: 40px;font-size: 13px !important;border-left: none;">{{data.title}}平台API接口域名地址</div>
            </div>
            <div class="flex">
              <div class="width82">获取游戏列表请求URL：{{ data.api_url }}/api/game/loadlist?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
          </div>
        </div>
        <div class="flex borderTop borderBottom">
          <div class="width20 borderRight">单一钱包</div>
          <div class="width82 width81">进入游戏请求URL：{{ data.api_url }}/api/usr/ingame?trace_id=dhf1aboc1iio</div>
          <div class="width36">{{ data.tips_url }}</div>
        </div>
        <div class="flex">
          <div class="width15">转账钱包</div>
          <div class="width85">
            <div class="flex borderBottom">
              <div class="width82">获取玩家鉴权Token请求URL：{{ data.api_url }}/api/player/v1/authorize?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex borderBottom">
              <div class="width82">玩家转账请求URL：{{ data.api_url }}/api/cash/v1/transfer?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex borderBottom">
              <div class="width82">进入游戏链接请求URL：{{ data.api_url }}/api/game/v1/entergame?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex borderBottom">
              <div class="width82">查询玩家余额请求URL：{{ data.api_url }}/api/cash/v1/getPlayerWallet?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
            <div class="flex">
              <div class="width82">查询转账状态URL：{{ data.api_url }}/api/cash/v1/transfer/status?trace_id=dhf1aboc1iio</div>
              <div class="width36">{{ data.tips_url }}</div>
            </div>
          </div>
        </div>
        <div class="flex borderTop" style="background-color: #d9ecff;">
          <div class="width20 borderRight">报表相关</div>
          <div class="width82 width81">注单记录报表请求URL：{{ data.web_url }}/api/v1/merchant/outer/record/GetGameRecordList?trace_id=6655421</div>
          <div class="width36">{{ data.tips_url }}</div>
        </div>
        <div class="flex borderTop" style="background-color: #d9ecff;">
          <div class="width20 borderRight">功能相关</div>
          <div class="width82 width81">玩家RTP调控请求URL：{{ data.web_url }}/api/v1/merchant/outer/rtp/control?trace_id=561432143</div>
          <div class="width36">{{ data.tips_url }}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 接入信息 -->
  <el-dialog v-model="data.isShowDetails" width="50%" title="接入信息" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="20vh">
    <el-form :model="data.addQuery" class="addQuery" ref="addQuery" :rules="data.rules" status-icon
      :validate-on-rule-change="false">
      <form-item title="API接入模式" :pass="true" value="api_type">
        <el-select v-model="data.addQuery.api_type" placeholder="请选择" disabled>
          <el-option v-for="item in APITYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span class="tipsText">({{ t('des_24') }})</span>
      </form-item>
      <form-item title="平台域名地址" value="api_url">
        <span class="box-title">{{ data.web_url }}</span>
        <span class="tipsText">({{ t('des_22') }})</span>
      </form-item>
      <form-item title="第三方接口域名" value="domain_name">
        <el-input class="width320" type="text" placeholder="请输入接口域名" v-model="data.addQuery.domain_name" clearable>
          <template #prepend>https://</template>
        </el-input>
        <span class="tipsText">({{ t('des_23') }})</span>
      </form-item>
      <form-item title="秘钥" :pass="true" value="key">
        <el-input class="width320" type="text" v-model="data.addQuery.key" placeholder="请输入秘钥" clearable />
        <el-button class="marginL5" size="small" type="primary" @click="autoKey">生成秘钥</el-button>
        <span class="tipsText">({{ t('des_27') }})</span>
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onHideDetails">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import FormItem from '@/components/FormItem/FormItem.vue'
import { COUNTRY } from '@/config/country'
import { APITYPE, DEMOPLAY, ServerCTType } from '@/config/eunm'
import { selectToLabel, sortArray, setCommaNumberToArr, removeDomain, domainVerification, OperatorServerBrand } from '@/utils/index'
import { setTimestampTime } from '@/utils/time'
import { getOperatorInfo } from '@/api/instrument'
import { putSystemChangeOperator, postSystemFandKey } from '@/api/merchant'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  isShowDetails: false, 
  api_url: location.host=='manage-ct.wbnr.xyz'? selectToLabel(ServerCTType,JSON.parse(localStorage.getItem('userInfo') as string).server_name_id) :OperatorServerBrand('api'),
  web_url:OperatorServerBrand('web'),
  tips_url:'trace_id为接入方自定义，唯一 请求方式：POST',
  addQuery: {
    id: 0,
    domain_name: '',
    api_url: '',
    is_multi_currency: 0,
    key: '',
    currency_ids: '',
    api_type: 0
  },
  rules: {
    domain_name: [{ required: true, message: '请输入第三方接口域名', trigger: 'blur' }],
    key: [{ required: true, message: '请输入', trigger: 'blur' }],
  },
  infoList: [
    { label: 'APP ID', key: 'app_id', value: 0, tips: t('des_21'), show: false },
    { label: '总代名称', key: 'operator_name', value: '', tips: t('des_25'), show: false },
    { label: '地区', key: 'area', value: '', tips: '商户的经营区域，可更改，创建商户时的信息设定', show: false },
    { label: '第三方接口域名', key: 'domain_name', value: '', tips: t('des_23'), show: false },
    { label: 'API接入模式', key: 'api_type', value: 0, tips: t('des_24'), show: false },
    { label: '状态', key: 'status', value: 0, tips: t('des_26'), show: false },
    { label: '秘钥', key: 'key', value: '', tips: t('des_27'), show: false },
    { label: '创建时间', key: 'created_at', value: 0, tips: t('des_28'), show: false },
    { label: '货币/货币ID', key: 'currency_id', value: [] as any[], tips: '商户游戏结算所使用的货币，不轻易更改，创建商户时的信息设定', show: false },
    { label: indexStore.BackOperator+'平台API对接文档', key: 'documentApi', value: '', show: true },
    { label: '对接文档密码', key: 'password', value: 123456, tips: '对接文档密码', show: true },
    { label: `<${indexStore.BackOperator}>对接文档`, key: 'document', value: '', tips: `<${indexStore.BackOperator}>对接文档`, show: true },
  ],
  title: indexStore.BackOperator
})

onMounted(async () => {
  getSearchList()
})

// 查询列表
const getSearchList = async () => {
  let res = await getOperatorInfo({})
  // 处理多货币
  if (res.data.currency_ids) {
    res.data.currency_id = []
    sortArray(setCommaNumberToArr(res.data.currency_ids), 'asc').forEach((item: number) => {
      res.data.currency_id.push({ label: selectToLabel(indexStore.currentArray, item) + '(' + selectToLabel(indexStore.currentArray, item, 'type', 'value') + ')', value: item })
    })
  }
  data.infoList.forEach((item: any) => {
    Object.keys(res.data).forEach((key: string) => {
      // 正常总代 + 总控
      if (!res.data.is_multi_currency) {
        if (item.key != 'document' && item.key != 'password') {
          item.show = false
        } else {
          item.show = true
        }
      } else {
        item.show = true
      }
      if (key == item.key) {
        item.value = res.data[key] as any
      }
    })
  })
  res.data.domain_name = removeDomain(res.data.domain_name)
  Object.assign(data.addQuery, res.data)
}

// 生成秘钥
const autoKey = async () => {
  let res = await postSystemFandKey({})
  data.addQuery.key = res.data
}

// 保存
const addQuery = ref<FormInstance>()
const save = async () => {
  if (!addQuery.value) return
  await addQuery.value.validate(async (valid, fields) => {
    if (valid) {
      let query = JSON.parse(JSON.stringify(data.addQuery))
      query.is_change_api = 1
      // 域名格式校验
      query.domain_name = domainVerification(query.domain_name)
      await putSystemChangeOperator(query)
      data.isShowDetails = false
      getSearchList()
      ElMessage.success('修改成功')
    }
  })
}

const download = (url: string) => {
  console.log(url)
  window.open(url, '_blank')
}

// 重置
const onHideDetails = () => {
  data.isShowDetails = false
}
</script>
<style scoped lang="scss">
.title-title {
  padding: 10px 0;
  font-size: 21px;
  font-weight: 600;
  color: #444444;
  border: 1px solid #dddddd;
  border-bottom: none;
  text-align: center;
  margin-top: -1px
}
.borderLR{
  border-left: none;
  border-right: none;
}
.borderTop{
  border-top: 1px solid #dddddd;
}
.borderRight{
  border-right: 1px solid #dddddd;
}
.borderBottom{
  border-bottom: 1px solid #dddddd;
}
.borderLeft{
  border-left: 1px solid #dddddd;
}
.color44 {
  color: #444444;
}

.marginT55 {
  margin-top: 55px;
}

.border {
  padding: 10px 5px 10px 5px;
  background-color: #fff;
  border-radius: 15px;
  .infoBox {
    border: 1px solid #dddddd;

    .contentItem {
      margin-left: -1px;
      margin-right: -1px;
      margin-bottom: -1px;
      border: 1px solid #dddddd;
    }

    div {
      line-height: 50px;
      font-size: 18px;
      font-weight: 600;
    }

    .width55 {
      border-left: 1px solid #dddddd;
      button {
        cursor: pointer;
        text-decoration: underline; //设置下划线
        text-underline-offset: 4px; //下划线和文字间距
        text-decoration-color: #67C23A; //下划线颜色
      }
    }

    .width65 {
      width: 65%;
      border-left: 1px solid #dddddd;
      .documentBtn {
        cursor: pointer;
        text-decoration: underline; //设置下划线
        text-underline-offset: 4px; //下划线和文字间距
        text-decoration-color: #67C23A; //下划线颜色
      }
    }

    .width55Currency {
      width: 65%;
      border-left: 1px solid #dddddd;
      font-size: 18px;
      font-weight: 600;
    }
    
  }
  .width58{
    width: 58%;
    .width82{
      width: 82%;
    }
    .width85{
      margin-left: -1px;
      border-left: 1px solid #dddddd;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }
    .width20{
      width: 18.2%;
    }
    .width82{
      width: 82%;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }
    .width81{
      width: 81.5% !important;
    }
    .width36{
      width: 22%;
      border-left: 1px solid #dddddd;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }
    .width30{
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 25px;
    }
  }
}
</style>